interview

Home / DeveloperSection / Interviews / How to add an icon as a placeholder in the input email box in bootstrap?

Ask Question
Ashutosh Kumar Verma

Ashutosh Kumar Verma

Follow
Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

14-Oct-2024

To set an icon as a placeholder in an input box using Bootstrap, you can use the following approach.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <title>Email Input with Icon</title>
   <style>
       .input-icon {
           position: relative;
       }
       .input-icon input {
           padding-left: 30px; /* Space for the icon */
       }
       .input-icon i {
           position: absolute;
           left: 10px;
           top: 50%;
           transform: translateY(-50%);
           color: #6c757d; /* Bootstrap's secondary color */
       }
   </style>
</head>
<body>
<div class="container mt-5">
   <h2>Set icon in input field</h2>
   <div class="input-icon">
       <i class="fas fa-envelope"></i>
       <input type="email" class="form-control" placeholder="Email address" aria-label="Email address">
   </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
answer 6518921410044851

 

MindStick Training

Liked By